import React, { useState } from 'react';
import './QuickFunctions.css';

const QuickFunctions = () => {
  const [activeFunction, setActiveFunction] = useState(null);

  const quickFunctions = [
    {
      id: 'settings',
      name: '设置',
      icon: '⚙️',
      color: '#FF6B35',
      description: '个性化设置、账户管理、隐私设置等'
    },
    {
      id: 'help',
      name: '帮助',
      icon: '❓',
      color: '#FF6B35',
      description: '使用指南、常见问题、在线客服等'
    },
    {
      id: 'service',
      name: '客服',
      icon: '📞',
      color: '#FF69B4',
      description: '在线客服、电话咨询、投诉建议等'
    },
    {
      id: 'favorites',
      name: '收藏',
      icon: '⭐',
      color: '#FFD700',
      description: '收藏的车型、经销商、资讯等'
    }
  ];

  const handleFunctionClick = (functionId) => {
    setActiveFunction(functionId);
    
    // 根据功能ID执行相应操作
    switch (functionId) {
      case 'settings':
        handleSettings();
        break;
      case 'help':
        handleHelp();
        break;
      case 'service':
        handleService();
        break;
      case 'favorites':
        handleFavorites();
        break;
      default:
        break;
    }
  };

  const handleSettings = () => {
    // 设置功能实现
    console.log('打开设置页面');
    // 这里可以添加设置页面的逻辑
    alert('设置功能 - 个性化设置、账户管理、隐私设置等');
  };

  const handleHelp = () => {
    // 帮助功能实现
    console.log('打开帮助页面');
    // 这里可以添加帮助页面的逻辑
    alert('帮助功能 - 使用指南、常见问题、在线客服等');
  };

  const handleService = () => {
    // 客服功能实现
    console.log('打开客服页面');
    // 这里可以添加客服页面的逻辑
    alert('客服功能 - 在线客服、电话咨询、投诉建议等');
  };

  const handleFavorites = () => {
    // 收藏功能实现
    console.log('打开收藏页面');
    // 这里可以添加收藏页面的逻辑
    alert('收藏功能 - 收藏的车型、经销商、资讯等');
  };

  return (
    <div className="quick-functions">
      <div className="quick-functions-header">
        <h3 className="quick-functions-title">快速功能</h3>
        <span className="quick-functions-more">更多</span>
      </div>
      
      <div className="quick-functions-grid">
        {quickFunctions.map((func) => (
          <div
            key={func.id}
            className={`quick-function-card ${activeFunction === func.id ? 'active' : ''}`}
            onClick={() => handleFunctionClick(func.id)}
            style={{
              '--function-color': func.color
            }}
          >
            <div className="function-icon" style={{ color: func.color }}>
              {func.icon}
            </div>
            <div className="function-name">{func.name}</div>
          </div>
        ))}
      </div>
    </div>
  );
};

export default QuickFunctions;
